<template>
  <div class="yl-container">
    <div class="yl-main">
      <!-- 按钮组 -->
      <div class="yl-btn-group">
        <YlButton
          uiType="plain"
          btnType="success"
          icon="el-icon-circle-plus-outline"
          @click="handleReturnSort"
        >
          <span>一键排序</span>
        </YlButton>
      </div>
      <!-- 树级菜单 -->
      <div v-loading="loading">
        <ylTree
          :treeConfig="treeConfig"
          @open-node="sortMenuOrder"
          @init-state="getInitState"
        />
        <el-dialog title="菜单排序" :visible.sync="dialogFormVisible" width="1184px" class="yl-dialog">
          <YlForm
            ref="ylform"
            :formConfig="formConfig"
            @close-dialog="getCloseDialog"
            @init-state="getInitState"
          />
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getAllMenuList
} from '@/mock/menu'
import {
  ruleOrder
} from '@/utils/formRule'
export default {
  data () {
    return {
      loading: false,
      // 新增 修改弹窗
      dialogFormVisible: false,
      // tree配置
      treeConfig: {
        hasMenuBtn: false,
        hasMenuInfo: true,
        hasCheckBox: false,
        treeData: []
      },
      // form配置
      formConfig: {
        class: 'yl-form-item-inline__content',
        isFix: false,
        btnMethod: ['submit', 'cancel'],
        formData: {
          menu_id: '',
          menu_parent_id: '',
          order: ''
        },
        editRules: {
          order: [
            { required: true, validator: ruleOrder, trigger: 'blur' }
          ]
        },
        columns: [
          {
            type: 'cascader',
            label: '父级菜单',
            prop: 'menu_parent_id',
            config: {
              value: 'nns_id',
              label: 'nns_menu_name',
              checkStrictly: true
            },
            options: []
          },
          {
            type: 'input',
            label: '排序序号',
            prop: 'order'
          }
        ],
        addApi: this.$ylapi.changeMenuOrder
      }
    }
  },
  created () {
    this.initData()
  },
  methods: {
    // 初始化数据
    initData () {
      this.loading = true
      this.getTreeData()
      this.showMenu()
    },
    // 获取树级数据
    async getTreeData () {
      let obj = {
        parent_menu_id: 0,
        with_pris: true,
        with_all: true
      }
      this.treeConfig.treeData = getAllMenuList(
        await this.$ylapi.getMenuChild(obj)
      )
      this.loading = false
    },

    // 获取所有菜单
    async showMenu (id) {
      let obj = {
        parent_menu_id: 0,
        with_pris: false,
        with_all: true
      }
      this.formConfig.columns[0].options = getAllMenuList(
        this.arrangeMenuList(
          await this.$ylapi.getMenuChild(obj)
        )
      )
    },
    // 递归清除children为空的项
    arrangeMenuList (arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].children.length === 0) {
          arr[i].children = undefined
        } else {
          this.arrangeMenuList(arr[i].children)
        }
      }
      return arr
    },

    // 菜单排序
    async sortMenuOrder (id) {
      this.dialogFormVisible = true
      let data = await this.$ylapi.getSingleMenuInfo(id)
      let cascaderList = data.nns_menu_relation
      cascaderList.unshift('0')
      this.formConfig.formData.menu_parent_id = cascaderList
      this.formConfig.formData.order = data.nns_order
      this.formConfig.formData.menu_id = data.nns_id
    },

    // 初始化树
    getInitState (val) {
      if (val) {
        this.dialogFormVisible = false
        this.initData()
      }
    },
    // 关闭弹窗
    getCloseDialog (val) { this.dialogFormVisible = val },

    // 一键重置排序
    async handleReturnSort () {
      // eslint-disable-next-line no-unused-expressions
      await this.$modal.confirm(this, {
        warning: '此操作将重置排序，且操作不可逆 是否继续?',
        api: this.$ylapi.menuSortReturn
      })
        ? this.initData()
        : ''
    }
  }
}
</script>
